<template>
  <div style="margin:30px;margin-top:5px">
    <el-row >
      <el-col  :span="4">
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0"  type="primary" @click="$router.push({ name: 'message'})" plain>返回</el-button>
      </el-col>
    </el-row>
    <h3  style="margin-top:33px">班级信息</h3>
    <el-row class="totality">
      <el-col  :span="4">
        <div class="l-top-50 grid-content bg-purple">班级名称</div>
      </el-col>
      <el-col :span="8">
        <div class="r-top-50-0 grid-content bg-purple">{{classesDetail.className || '/'}}</div>
      </el-col>
      <el-col  :span="4">
        <div class="l-50 grid-content bg-purple">时间</div>
      </el-col>
      <el-col :span="8">
        <div class="r-50 grid-content bg-purple">{{classesDetail.classTime || '/'}}</div>
      </el-col>
    </el-row>
    <el-row class="totality">
    <el-col  :span="4">
      <div class="l-50 grid-content bg-purple">老师</div>
    </el-col>
    <el-col :span="8">
      <div class="r-50-0 grid-content bg-purple">{{classesDetail.teacherNames || '/'}}</div>
    </el-col>
    <el-col  :span="4">
      <div class="l-50 grid-content bg-purple">人数</div>
    </el-col>
    <el-col :span="8">
      <div class="r-50 grid-content bg-purple">{{classesDetail.count || '/'}}</div>
    </el-col>
  </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="l-50 grid-content bg-purple">费用</div>
      </el-col>
      <el-col :span="8">
        <div class="r-50 grid-content bg-purple">{{classesDetail.money || '/'}}</div>
      </el-col>
      <el-col  :span="4">
        <div class="l-50 grid-content bg-purple">地点</div>
      </el-col>
      <el-col :span="8">
        <div class="r-50 grid-content bg-purple">{{(classesDetail.address=="undefined"?'/':classesDetail.address) || '/'}}</div>
      </el-col>
    </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="l-50 grid-content bg-purple">课程名称</div>
      </el-col>
      <el-col :span="8">
        <div class="r-bottom-50-0 grid-content bg-purple">{{classesDetail.courseId || '/'}}</div>
      </el-col>
      <el-col  :span="4">
        <div class="l-50 grid-content bg-purple">广告名称</div>
      </el-col>
      <el-col :span="8">
        <div class="r-bottom-50 grid-content bg-purple">{{(classesDetail.admissionsId=="undefined"?'/':classesDetail.admissionsId) || '/'}}</div>
      </el-col>
    </el-row>


    <el-row class="totality" >
      <el-col  :span="4" >
        <div class="l-bottom-150 grid-content bg-purple" >班级描述</div>
      </el-col>
      <el-col :span="20" >
        <div class="r-bottom-150 grid-content bg-purple" >{{(classesDetail.classSummary=="undefined"?'/':classesDetail.classSummary) || '/'}}</div>
      </el-col>
    </el-row>

    <h3 v-if="this.$route.params.id === 'W'|| this.$route.params.id === 'Y'">审批信息</h3>
    <el-row v-if="this.$route.params.id === 'W'|| this.$route.params.id === 'Y'" class="totality">
      <el-col  :span="4">
        <div class="l-bottom-50 grid-content bg-purple">审批人</div>
      </el-col>
      <el-col :span="8">
        <div class="r-bottom-50-0 grid-content bg-purple">{{classesDetail.resultUser || '/'}}</div>
      </el-col><el-col  :span="4">
      <div class="l-bottom-50 grid-content bg-purple">审批时间</div>
    </el-col>
      <el-col :span="8">
        <div class="r-bottom-50 grid-content bg-purple">{{classesDetail.resultTime || '/'}}</div>
      </el-col>
    </el-row>
    <el-row v-if="this.$route.params.id === 'W'" class="totality" >
      <el-col  :span="4" >
        <div class="l-bottom-top-150 grid-content bg-purple">原因</div>
      </el-col>
      <el-col :span="20">
        <div class="r-bottom-150 grid-content bg-purple" >{{classesDetail.resultSummary || '/'}}</div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 80px">
      <el-col  :span="10">
        <div>&nbsp;</div>
      </el-col>
      <el-col  :span="6">
        <el-button   style="padding-left:50px;padding-right:50px;height:30px;line-height:0" v-if="this.$route.params.id === 'D'"   type="primary" @click="open()">通过</el-button>
        <el-button  style="padding-left:50px;padding-right:50px;height:30px;line-height:0" v-if="this.$route.params.id === 'D'" @click="dataFormSubmit('拒绝')">拒绝</el-button>
        <el-button  style="padding-left:50px;padding-right:50px;height:30px;line-height:0" v-if="this.$route.params.id !== 'D'" type="primary" @click="$router.push({ name: 'message', params: {id:'classes'}  })" plain>返回</el-button>
      </el-col>
      <el-col :span="10">
        <div>&nbsp;</div>
      </el-col>

    </el-row>
    <!-- 拒绝弹窗 -->
    <el-dialog
      title="原因"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-input
        type="textarea"
        placeholder="请输入拒绝原因"
        v-model="textarea"
        maxlength="500"
        show-word-limit
        @input="textInputChange"
        size="medium"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button style="padding-left:50px;padding-right:50px"  @click="centerDialogVisible = false">取 消</el-button> -->
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0"  type="primary" @click="dialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


  export default {
    data() {
      return {
        type: 'D',
        txtVal: 0,
         // 拒绝弹窗
        centerDialogVisible:false,
         // 传递过来的教职信息详情数据
        classesDetail:{},
        // 拒绝弹窗实时输入的内容数据绑定
        textarea:'',
        inputContent:'',
        // 班级id
        classId:''
        // type: this.$route.params.type
      }
    },
    computed: {},
    created() {
      this.type = this.$route.params.id
      // console.log(type)
      this.classId=this.$route.params.item.classId
    },
    watch: {
      $route: {
        deep: true,
        immediate: true,
        handler(val) {
          if(val){
            let path=val.name
            if(path=='classes-particulars'){
              this.classId=val.params.item.classId
              this.getClassesDetailData()
            }
          }
        }
      }
    },
    methods: {
       // 获取教职信息详情数据
      getClassesDetailData(){
        this.$http({
          url: this.$http.adornUrl('/info/classDetails?classId='+this.classId
          ),
          method: 'post',
          data:{}
        }).then(res=>{
          this.classesDetail=res.data.data
          console.log('获取班级信息详情数据', this.classesDetail)
        })
      },
       // 拒绝弹窗实时输入事件
      textInputChange(event){
        console.log('实时输入',event)
        this.inputContent=event
      },
      // 通过
      open() {
        var _self=this
         this.$confirm('确认提交吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           _self.$http({
            url: _self.$http.adornUrl('/sys/class/classCheck?classId='+_self.classId+'&result=1'+'&resultSummary='+_self.textarea
            ),
            method: 'post',
            data:{}
          }).then(res=>{
            console.log('获取最终班级信息审批提交的结果',res)
            if(res.data.code==0){
              _self.$message({
                type: 'success',
                message: res.data.msg
              });
              this.$router.push({ name: 'message' })
              // 关闭原因弹窗
              this.centerDialogVisible=false
            }else {
              _self.$message({
                type: 'info',
                message: res.data.msg
              }); 
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '审批失败'
          });          
        });
        // const imga = require("../../../../assets/img/审批完成2.png");
        // this.$alert('<strong><img style="width: 70%;margin-left: 15%;" src='+ imga +'><div style="text-align: center;">审批通过</div></strong>', '', {
        //   dangerouslyUseHTMLString: true,
        //   showConfirmButton: false
        // });
      },
      // 拒绝弹窗原因弹出
      dataFormSubmit(){
        this.centerDialogVisible=true
      },
       // 拒绝原因弹窗确定
      dialogSubmit(){
        // this.requestSubmit(2)
         var _self=this
        this.$confirm('确认拒绝吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _self.$http({
            url: _self.$http.adornUrl('/sys/class/classCheck?classId='+_self.classId+'&result=2'+'&resultSummary='+_self.textarea
            ),
            method: 'post',
            data:{}
          }).then(res=>{
            console.log('获取最终班级信息拒绝提交的结果',res)
            if(res.data.code==0){
              _self.$message({
                type: 'success',
                message: res.data.msg
              });
              this.$router.push({ name: 'message' })
              // 关闭原因弹窗
              this.centerDialogVisible=false
            }else {
              _self.$message({
                type: 'info',
                message: res.data.msg
              }); 
            }
          })
        }).catch(() => {
          _self.$message({
            type: 'info',
            message: res.data.msg
          });          
        });
      },
      descInput(){
        this.txtVal = this.formData.field101.length;
      },
    }
  }
</script>
<style>
  .right-r {
    padding: 13px 13px 13px 33px;
    border: 1px solid  #e1e8ef;
    border-left: 0px solid  #e1e8ef;
  }
  .left-l {
    padding: 13px 13px 13px 33px;
    background: #ecf4fb;
    border: 1px solid  #e1e8ef;

  }
</style>

